<template>
  <view class="container">
    <!-- 广告轮播图 -->
    <swiper class="banner" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item, index) in adList" :key="index">
        <image :src="item.menuUrl" mode="aspectFill" class="banner-image"></image>
      </swiper-item>
    </swiper>

    <!-- 常用菜单 -->
    <view class="section">
      <view class="section-title">常用菜单</view>
      <view class="menu-grid">
        <view class="menu-item" v-for="(item, index) in commonMenus" :key="index" @click="handleMenuClick(item)">
          <image :src="item.menuIcon" mode="aspectFit" class="menu-icon"></image>
          <text class="menu-name">{{ item.menuName }}</text>
          <text class="menu-desc">{{ item.menuDesc }}</text>
        </view>
      </view>
    </view>

    <!-- 最近使用 -->
    <view class="section">
      <view class="section-title">最近使用</view>
      <view class="menu-grid">
        <view class="menu-item" v-for="(item, index) in recentMenus" :key="index" @click="handleMenuClick(item)">
          <image :src="item.menuIcon" mode="aspectFit" class="menu-icon"></image>
          <text class="menu-name">{{ item.menuName }}</text>
          <text class="menu-desc">{{ item.menuDesc }}</text>
        </view>
      </view>
    </view>

    <!-- 学科菜单 -->
    <view class="section">
      <view class="section-title">学科菜单</view>
      <view class="subject-grid">
        <view class="subject-item" v-for="(item, index) in subjectMenus" :key="index" @click="handleMenuClick(item)">
          <image :src="item.menuIcon" mode="aspectFit" class="subject-icon"></image>
          <text class="subject-name">{{ item.menuName }}</text>
        </view>
      </view>
    </view>

    <!-- AI对话入口按钮 -->
    <view class="ai-chat-btn" @click="navigateToChat">
      <text>AI对话</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuList: [],
      adList: [],
      commonMenus: [],
      recentMenus: [],
      subjectMenus: []
    }
  },
  onLoad() {
    this.fetchMenuData()
  },
  methods: {
    async fetchMenuData() {
      try {
        console.log('开始获取菜单数据');
        const response = await this.$http.get('/homepage-menu')
        console.log('获取到的数据:', response.data);
        this.menuList = response.data

        // 分类处理数据
        this.adList = this.menuList.filter(item => item.menuType === 'adl')
        this.commonMenus = this.menuList.filter(item => item.menuType === 'common')
        this.recentMenus = this.menuList.filter(item => item.menuType === 'recent')
        this.subjectMenus = this.menuList.filter(item => item.menuType === 'subject')

        console.log('处理后的数据:', {
          adList: this.adList,
          commonMenus: this.commonMenus,
          recentMenus: this.recentMenus,
          subjectMenus: this.subjectMenus
        });
      } catch (error) {
        console.error('获取菜单数据失败：', error)
        if (error.response) {
          console.error('错误状态码:', error.response.status);
          console.error('错误数据:', error.response.data);
        }
        uni.showToast({
          title: error.response?.data?.message || '获取数据失败',
          icon: 'none',
          duration: 2000
        })
      }
    },
    handleMenuClick(menu) {
      // 处理菜单点击事件
      if (menu.menuUrl) {
        uni.navigateTo({
          url: menu.menuUrl
        })
      }
    },
    navigateToChat() {
      uni.navigateTo({
        url: '/pages/ai-chat/index'
      })
    }
  }
}
</script>

<style>
/* 容器样式 */
.container {
  padding: 20rpx;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 广告轮播图样式 */
.banner {
  width: 100%;
  height: 350rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.banner-image {
  width: 100%;
  height: 100%;
}

/* 区块样式 */
.section {
  margin-bottom: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  color: #333333;
  padding-left: 16rpx;
  border-left: 8rpx solid #007AFF;
}

/* 菜单网格样式 */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.menu-item:active {
  background-color: #f0f0f0;
  transform: scale(0.98);
}

.menu-icon {
  width: 88rpx;
  height: 88rpx;
  margin-bottom: 16rpx;
}

.menu-name {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 8rpx;
  color: #333333;
}

.menu-desc {
  font-size: 24rpx;
  color: #666666;
  text-align: center;
  line-height: 1.4;
}

/* 学科网格样式 */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.subject-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.subject-item:active {
  background-color: #f0f0f0;
  transform: scale(0.98);
}

.subject-icon {
  width: 72rpx;
  height: 72rpx;
  margin-bottom: 12rpx;
}

.subject-name {
  font-size: 24rpx;
  color: #333333;
  text-align: center;
  line-height: 1.4;
}

.ai-chat-btn {
  position: fixed;
  bottom: 40rpx;
  right: 40rpx;
  background-color: #007AFF;
  color: #ffffff;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
  font-size: 28rpx;
  font-weight: 600;
  z-index: 100;
}
</style>
